<template>
	<view class="wrap">
		<view class="body-wrap">
			<view class="item">
				<view v-if="type == 1" class="remove-btn" @click="removeRoute">删除线路</view>
				<view @click="onClick">
					<view class="item-line">
						<view class="circle start">起</view>
						<view>
							<text class="btn" v-text="obj.cityStart1 ? obj.cityStart1 : '+新增'"></text> / <text
								class="btn" v-text="obj.cityStart2 ? obj.cityStart2 : '+新增'">+新增</text> / <text
								class="btn" v-text="obj.cityStart3 ? obj.cityStart3 : '+新增'">+新增</text>
						</view>
					</view>
					<view class="item-line">
						<view class="circle end">终</view>
						<view>
							<text class="btn" v-text="obj.cityEnd1 ? obj.cityEnd1 : '+新增'">+新增</text> / <text
								class="btn" v-text="obj.cityEnd2 ? obj.cityEnd2 : '+新增'">+新增</text> / <text class="btn"
								v-text="obj.cityEnd3 ? obj.cityEnd3 : '+新增'">+新增</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btnBox">
				<view class="btn" @click="save">保存</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrap">
				<view class="popup-item" v-if="step === 1">
					<view class="title">
						<view class="flex">
							<view class="circle start">起</view>
							<view class="bold">请选择起点</view>
							<view class="desc">{{startAreaArray.length}}/3</view>
						</view>
						<view class="select flex">
							<view class="area" v-for="(item, index) in startAreaArray" :key="index">
								<view class="text">{{item}}</view>
								<image @click="startRemoveArea(index)" class="del-btn" src="../../static/icon_del.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="prov-box">
							<view :class="{'active':startProvValue == item.value}" v-for="(item, index) in areaList"
								:key="item.value" @click="startSelectProv(index)">{{item.label}}</view>
						</view>
						<view class="city-box">
							<view v-for="(item, index) in startAreaList" :key="index" @click="startSelectArea(index)"
								:class="{'active': startAreaArray.includes(item.label)}">{{item.label}}</view>
						</view>
					</view>
					<view class="footer-btn" @click="next">下一步</view>
				</view>
				<view class="popup-item" v-else>
					<view class="title">
						<view class="flex">
							<view class="circle start">终</view>
							<view class="bold">请选择终点</view>
							<view class="desc">{{endAreaArray.length}}/3</view>
						</view>
						<view class="select flex">
							<view class="area" v-for="(item, index) in endAreaArray" :key="index">
								<view class="text">{{item}}</view>
								<image @click="endRemoveArea(index)" class="del-btn" src="../../static/icon_del.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="prov-box">
							<view :class="{'active':endProvValue == item.value}" v-for="(item, index) in areaList"
								:key="item.value" @click="endSelectProv(index)">{{item.label}}</view>
						</view>
						<view class="city-box">
							<view v-for="(item, index) in endAreaList" :key="index" @click="endSelectArea(index)"
								:class="{'active': endAreaArray.includes(item.label)}">{{item.label}}</view>
						</view>
					</view>
					<view class="footer-btn" @click="finish">完成</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				arrList: ['武汉市', '北京市', '广州市'],

				step: 1,
				areaList: [],
				startProvValue: 1,
				startAreaList: [],
				startAreaArray: [],
				endProvValue: 1,
				endAreaList: [],
				endAreaArray: [],
				
				obj: {
					cityStart1: '',
					cityStart2: '',
					cityStart3: '',
					cityEnd1: '',
					cityEnd2: '',
					cityEnd3: '',
				},

				info: null,
				driverRouteId: '',
				
				startAreaIdArray: [],
				endAreaIdArray: []
			}
		},
		created() {
			this.getRegion()
		},
		onLoad(options) {
			this.type = options.type
			if (this.type == 0) {
				uni.setNavigationBarTitle({
					title: '添加线路'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '编辑线路'
				});
			}
			if (options.data) {
				console.log(options.data)
				this.info = JSON.parse(options.data)
				this.obj.cityStart1 = this.info.cityStart1
				this.obj.cityStart2 = this.info.cityStart2
				this.obj.cityStart3 = this.info.cityStart3
				this.obj.cityEnd1 = this.info.cityEnd1
				this.obj.cityEnd2 = this.info.cityEnd2
				this.obj.cityEnd3 = this.info.cityEnd3
				if (this.obj.cityStart1) this.startAreaArray.push(this.obj.cityStart1)
				if (this.obj.cityStart2) this.startAreaArray.push(this.obj.cityStart2)
				if (this.obj.cityStart3) this.startAreaArray.push(this.obj.cityStart3)
				if (this.obj.cityEnd1) this.endAreaArray.push(this.obj.cityEnd1)
				if (this.obj.cityEnd2) this.endAreaArray.push(this.obj.cityEnd2)
				if (this.obj.cityEnd3) this.endAreaArray.push(this.obj.cityEnd3)
				
				this.obj.cityIdStart1 = this.info.cityIdStart1
				this.obj.cityIdStart2 = this.info.cityIdStart2
				this.obj.cityIdStart3 = this.info.cityIdStart3
				this.obj.cityIdEnd1 = this.info.cityIdEnd1
				this.obj.cityIdEnd2 = this.info.cityIdEnd2
				this.obj.cityIdEnd3 = this.info.cityIdEnd3
				if (this.obj.cityIdStart1) this.startAreaIdArray.push(this.obj.cityIdStart1)
				if (this.obj.cityIdStart2) this.startAreaIdArray.push(this.obj.cityIdStart2)
				if (this.obj.cityIdStart3) this.startAreaIdArray.push(this.obj.cityIdStart3)
				if (this.obj.cityIdEnd1) this.endAreaIdArray.push(this.obj.cityIdEnd1)
				if (this.obj.cityIdEnd2) this.endAreaIdArray.push(this.obj.cityIdEnd2)
				if (this.obj.cityIdEnd3) this.endAreaIdArray.push(this.obj.cityIdEnd3)
			}
		},
		methods: {
			next() {
				if (!this.startAreaArray.length) {
					uni.showToast({
						title: '请先选择地区，最少一个',
						icon: 'none'
					});
					return
				}
				this.step = 2
			},
			finish() {
				if (!this.endAreaArray.length) {
					uni.showToast({
						title: '请先选择地区，最少一个',
						icon: 'none'
					});
					return
				}
				this.obj.cityStart1 = this.startAreaArray[0]
				this.obj.cityStart2 = this.startAreaArray[1] ? this.startAreaArray[1] : ''
				this.obj.cityStart3 = this.startAreaArray[2] ? this.startAreaArray[2] : ''
				this.obj.cityEnd1 = this.endAreaArray[0]
				this.obj.cityEnd2 = this.endAreaArray[1] ? this.endAreaArray[1] : ''
				this.obj.cityEnd3 = this.endAreaArray[2] ? this.endAreaArray[2] : ''
				
				this.obj.cityIdStart1 = this.startAreaIdArray[0]
				this.obj.cityIdStart2 = this.startAreaIdArray[1] ? this.startAreaIdArray[1] : ''
				this.obj.cityIdStart3 = this.startAreaIdArray[2] ? this.startAreaIdArray[2] : ''
				this.obj.cityIdEnd1 = this.endAreaIdArray[0]
				this.obj.cityIdEnd2 = this.endAreaIdArray[1] ? this.endAreaIdArray[1] : ''
				this.obj.cityIdEnd3 = this.endAreaIdArray[2] ? this.endAreaIdArray[2] : ''
				
				this.step = 1
				console.log(this.obj)
				this.$refs.popup.close()
			},
			endRemoveArea(index) {
				this.endAreaArray.splice(index, 1)
				this.endAreaIdArray.splice(index, 1)
			},
			startRemoveArea(index) {
				this.startAreaArray.splice(index, 1)
				this.startAreaIdArray.splice(index, 1)
			},
			endSelectArea(index) {
				let area = this.endAreaList[index].label
				if (this.endAreaArray.length == 3) {
					uni.showToast({
						title: '最多添加3个地区',
						icon: 'none'
					});
					return
				}
				if (this.endAreaArray.includes(area)) {
					return
				}
				this.endAreaArray.push(area)
				this.endAreaIdArray.push(this.endAreaList[index].value)
			},
			startSelectArea(index) {
				let area = this.startAreaList[index].label
				if (this.startAreaArray.length == 3) {
					uni.showToast({
						title: '最多添加3个地区',
						icon: 'none'
					});
					return
				}
				if (this.startAreaArray.includes(area)) {
					return
				}
				this.startAreaArray.push(area)
				this.startAreaIdArray.push(this.startAreaList[index].value)
			},
			startSelectProv(index) {
				this.startAreaList = this.areaList[index].children
				this.startProvValue = this.areaList[index].value
			},
			endSelectProv(index) {
				this.endAreaList = this.areaList[index].children
				this.endProvValue = this.areaList[index].value
			},
			save() {
				console.log(this.startAreaArray)
				console.log(this.endAreaArray)
				if(!this.startAreaArray.length){
					uni.showToast({
						title: '请添加起点',
						icon: 'none'
					});
					return
				}
				if(!this.endAreaArray.length){
					uni.showToast({
						title: '请添加终点',
						icon: 'none'
					});
					return
				}
				this.type == 0 ? this.postAddRoute() : this.postEditRoute()
			},
			postAddRoute() {
				this.wxRequest({
					url: `${this.API}/driverRoute/AddDriverRoute`,
					method: 'POST',
					data: this.obj,
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
						this.startAreaArray = []
						this.endAreaArray = []
						uni.navigateBack()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			postEditRoute() {

				let obj = Object.assign(this.obj, {
					driverRouteId: this.info.driverRouteId
				})
				this.wxRequest({
					url: `${this.API}/driverRoute/UpdateDriverRoute`,
					method: 'POST',
					data: obj,
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						this.startAreaArray = []
						this.endAreaArray = []
						uni.navigateBack()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			removeRoute() {
				uni.showModal({
					title: '提示',
					content: '是否删除该线路?',
					success: res => {
						if (res.confirm) {
							this.wxRequest({
								url: `${this.API}/driverRoute/DeleteDriverRoute?driverRouteId=${this.info.driverRouteId}`,
								method: 'GET',
								header: {
									'authorization': uni.getStorageSync(this.DATA_KEY.token),
								},
								title: '加载中...',
								success: res => {
									console.log(res)
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									uni.navigateBack()
								},
								fail: e => {
									console.log(e);
								}
							});
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			newArrint(arr) {
				let newArr = [];
				for (let i = 0; i < arr.length; i++) {
					let arrLi = {};
					if (arr[i].children.length > 0) {
					    let arrchildren = arr[i].children;
						arrLi = arr[i];
						arrLi.children = [];
						for (let j = 0; j < arrchildren.length; j++) {
							if (arrchildren[j].children.length > 0) {
								arrLi.children.push(arrchildren[j]);
							}
						}
						newArr.push(arrLi);
					}
				}
				let convert = [];
				for (let z = 0; z < newArr.length; z++) {
					if (newArr[z].children.length > 0) {
						convert.push(newArr[z]);
					}
				}
				return convert;
			},
			getRegion() {
				this.wxRequest({
					url: `${this.API}/basis/qvoRegion/selectRegion`,
					method: 'GET',
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						let list = this.newArrint(res.data.data)
						this.areaList = list
						this.startAreaList = list[0].children
						this.endAreaList = list[0].children
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			onClick() {
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss">
	.popup-wrap {
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		height: calc(70vh);
		width: 100%;
		box-sizing: border-box;
		padding: 110rpx 0 80rpx;
		position: relative;
		box-sizing: border-box;

		.popup-item {
			width: 100%;
			height: 100%;

			.content {
				width: 100%;
				height: 100%;
				display: flex;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				line-height: 80rpx;
				border-top: 1rpx solid #e9e9e9;

				.prov-box {
					width: 45%;
					background: #efefef;
					height: 100%;
					overflow: auto;

					view {
						border-top: 1rpx solid #efefef;

						&:first-child {
							border-top: none;
						}

						&.active {
							background: #fff;
							color: #4089ff;
						}
					}
				}

				.city-box {
					width: 55%;
					height: 100%;
					overflow: auto;

					view {
						border-top: 1rpx solid #efefef;

						&.active {
							// background: #4089ff;
							color: #4089ff;
						}

						&:first-child {
							border-top: none;
						}
					}
				}
			}
		}

		.footer-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			background: #4089ff;
			line-height: 80rpx;

			&.disable {
				background: #999;
			}
		}

		.title {
			position: absolute;
			top: 32rpx;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;

			.flex {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.select {
				margin-left: 12rpx;

				.area {
					position: relative;
					font-size: 26rpx;
					color: #4089ff;
					border-radius: 10rpx;
					padding: 6rpx 2rpx;
					text-align: center;
					border: 1rpx solid #4089ff;
					font-weight: normal;
					margin: 0 12rpx;

					.text {
						width: 100rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.del-btn {
						background: #fff;
						position: absolute;
						width: 38rpx;
						height: 38rpx;
						top: -19rpx;
						right: -19rpx;
					}
				}
			}

			.circle {
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 50%;
				padding: 4rpx 12rpx;
				color: #fff;

				&.start {
					background: #00d967;
				}

				&.end {
					background: #da7200;
				}
			}

			.bold {
				font-size: 30rpx;
				font-weight: bold;
				margin: 0 12rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.body-wrap {
		.item {
			padding: 32rpx;
			background: #fff;
			margin-top: 24rpx;

			.remove-btn {
				text-align: right;
				color: #f00;
				font-size: 28rpx;
				margin-bottom: 24rpx;
			}

			.btn {
				font-size: 26rpx;
				color: #4089ff;
				border-radius: 10rpx;
				padding: 6rpx;
				box-sizing: border-box;
				text-align: center;
				display: inline-block;
				width: 150rpx;
				border: 1rpx solid #4089ff;
				font-weight: normal;
				margin: 0 12rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.item-line {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #333;
				font-weight: bold;

				&:first-child {
					margin-bottom: 32rpx;
				}

				.circle {
					font-size: 28rpx;
					font-weight: 400;
					border-radius: 50%;
					padding: 4rpx 12rpx;
					margin-right: 12rpx;
					color: #fff;

					&.start {
						background: #00d967;
					}

					&.end {
						background: #da7200;
					}
				}
			}
		}
	}

	.wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 0 calc(100rpx + env(safe-area-inset-bottom));
	}

	.footer {
		position: absolute;
		bottom: calc(10rpx + env(safe-area-inset-bottom));
		width: calc(100%);
		box-sizing: border-box;
		padding: 0 32rpx;

		.btnBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn {
			color: #FFFFFF;
			background: #4089ff;
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			text-align: center;
			box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
		}
	}
</style>
